<template>
    <el-container direction="horizontal" :style="wrapStyle">
        <Aside></Aside>
        <el-container direction="vertical">
            <Top></Top>
            <el-main>
                <el-header style="text-align:left">
                    <el-button type="primary" size="medium" @click="dialogFormVisible = true">添加成绩</el-button>
                </el-header>
                <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    border>
                    <el-table-column
                    label="编号"
                    width="100"
                    align="center">
                    <template v-slot:default="scope">{{ scope.$index+1 }}</template>
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="姓名"
                    width="250">
                    </el-table-column>
                    <el-table-column
                    prop="class"
                    label="班级"
                    width="350"
                    show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                    prop="mat"
                    label="数学"
                    width="150"
                    show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                    prop="chn"
                    label="语文"
                    width="150"
                    show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                    prop="eng"
                    label="英语"
                    width="150"
                    show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        label="平均成绩"
                        width="150"
                        show-overflow-tooltip>
                        <template v-slot:default="scope">
                            {{aver(scope.$index)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                    label="操作"
                    show-overflow-tooltip>
                    <template v-slot:default="scope">
                        <el-button type="danger" size="small" @click="del(scope.$index)">删除</el-button>
                    </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
        <el-dialog title="添加成绩" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="班级" :label-width="formLabelWidth">
                    <el-select v-model="form.class" placeholder="请选择班级">
                        <el-option label="高职计算机1班" value="高职计算机1班"></el-option>
                        <el-option label="高职计算机2班" value="高职计算机2班"></el-option>
                        <el-option label="高职计算机3班" value="高职计算机3班"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数学成绩" :label-width="formLabelWidth">
                    <el-input v-model="form.mat" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="语文成绩" :label-width="formLabelWidth">
                    <el-input v-model="form.chn" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="英语成绩" :label-width="formLabelWidth">
                    <el-input v-model="form.eng" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>
    </el-container>
</template>
<script>
import Aside from '@/components/Aside'
import Top from '@/components/Top'
export default {
    components:{
        Aside,
        Top
    },
    watch:{
        
    },
    methods:{
        add() {
            this.form.mat = Number(this.form.mat);
            this.form.chn = Number(this.form.chn);
            this.form.eng = Number(this.form.eng);
            this.tableData.push(this.form)
            this.dialogFormVisible = false;
            this.form = {}
        },
        del(i) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.tableData.splice(i,1);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
                    
        },
        resize() {
            let height = document.documentElement.clientHeight;
            this.wrapStyle.height = height+'px';
        },
        aver(i){
            let average = (this.tableData[i].mat+this.tableData[i].chn+this.tableData[i].eng)/3
            return average.toFixed(2);
        }
    },
    mounted(){
        this.resize();
        // this.aver();
    },
    data(){
        return {
            dialogFormVisible: false,
            form:{
                name:"",
                class: "",
                mat: 0,
                chn: 0,
                eng: 0
            },
            formLabelWidth: '120px',
            wrapStyle:{
                height:""
            },
            tableData: [
                {
                    name: '赵子琴',
                    class: '高职计算机1班',
                    mat:96,
                    chn:93,
                    eng:87
                },
                {
                    name: '钱丑棋',
                    class: '高职计算机1班',
                    mat:54,
                    chn:62,
                    eng:38
                },
                {
                    name: '孙寅书',
                    class: '高职计算机1班',
                    mat:93,
                    chn:95,
                    eng:98
                },
                {
                    name: '李卯画',
                    class: '高职计算机1班',
                    mat:68,
                    chn:98,
                    eng:76
                },
                {
                    name: '周辰笔',
                    class: '高职计算机1班',
                    mat:88,
                    chn:75,
                    eng:62
                },
                {
                    name: '吴巳墨',
                    class: '高职计算机1班',
                    mat:79,
                    chn:89,
                    eng:99
                },
                {
                    name: '郑午纸',
                    class: '高职计算机1班',
                    mat:98,
                    chn:88,
                    eng:78
                },
                {
                    name: '王未砚',
                    class: '高职计算机1班',
                    mat:94,
                    chn:85,
                    eng:76
                },
                {
                    name: '冯申梅',
                    class: '高职计算机1班',
                    mat:100,
                    chn:94,
                    eng:98
                },
                {
                    name: '陈酉兰',
                    class: '高职计算机1班',
                    mat:83,
                    chn:84,
                    eng:85
                },
                {
                    name: '褚戌竹',
                    class: '高职计算机1班',
                    mat:97,
                    chn:97,
                    eng:68
                },
                {
                    name: '卫亥菊',
                    class: '高职计算机1班',
                    mat:60,
                    chn:77,
                    eng:90
                }
                ],
            multipleSelection: []
        }
    },

}
</script>